<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Patient List</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/jquery/jquery.validate.js"></script>
	<script src="${contextPath}/js/patient/patient.js"></script>
</head>
<body class="metro lists">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="patient-list-container" class="list-container">
        	<%-- header-container --%>
       		<s:set var="mode" value="'list'"/>
   			<jsp:include page="/WEB-INF/content/patient/PatientMenuContainer.jsp" flush="true"/>
   			
            <div id="patient-search-form-container" class="panel collapsed" data-role="panel">
            	<div class="panel-header">Search Patients</div>
                <div class="panel-content" style="display: none;">
                    <form id="patient-search-form" class="search-form patient-search" action="${contextPath}/patient/list" method="get">
                        <fieldset>
                            <label>Name</label>
                            <div class="input-control text">
                                <input type="text" name="term" value="" placeholder="search text"/>
                                <button type="submit" class="btn-search"></button>
                            </div>
                            <div class="input-control radio">
                            	Order by:
                            	<div class="input-control radio margin10 default-style" data-role="input-control">
                            		<label>
                            			<input type="radio" name="sort" value="name" checked="checked"/>
                            			<span class="check"></span>
                            			Name
                            		</label>
                            	</div>
                            	<div class="input-control radio margin10 default-style" data-role="input-control">
                            		<label>
                            			<input type="radio" name="sort" value="dob"/>
                            			<span class="check"></span>
                            			Date of Birth
                            		</label>
                            	</div>
                            </div>
                            <div class="btn-control">
                            <input type="submit" value="Search" />
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <br clear="all"/>
            <div class="count-container">
            	<em class="item-title fg-green place-left">Found ${size} Items</em>
            	<%--
                <button id="btn-print-preview" class="small place-right no-print"><i class="icon-printer"></i>Preview</button>
                <button id="btn-printpatients" class="small place-right no-print"><i class="icon-printer"></i>Print</button>
            	 --%>
                <br clear="all"/>
            </div>
            <s:if test="%{termExist || sortExist}">
            	<div id="search-info-container"> 
        			search <em class="fg-darkOrange">${term}</em>
                    ordered by <em class="fg-darkGreen">${sort.label}</em>          
            	</div> 
            </s:if>
            <div class="listview-outlook">
            	<s:iterator var="oGuiPatient" value="%{guiPatientList}">
                	<a href="${contextPath}/patient/show?id=${oGuiPatient.userId}" class="list">
                    	<div class="list-content">
                        	<div class="list-icon-container place-left">
         						<s:if test="%{#oGuiPatient.male}">
          							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
         						</s:if>
         						<s:elseif test="%{#oGuiPatient.female}">
          							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
         						</s:elseif>
        					</div>
                        	<div class="place-left">
                            	<span class="list-title">${oGuiPatient.name}</span>
                                <span class="list-subtitle">Date Of Birth: ${oGuiPatient.dobString}</span>
         						<span class="list-remark">${oGuiPatient.gender}</span>
                            </div>
                            <br clear="all"/>
                        </div>
                    </a>
                </s:iterator>
            </div>
            
           <div class="pagination no-print">           	
                <ul>
                    <li class="first ${guiPagination.activePage == guiPagination.firstPage ? 'disabled' : ''}">
                        <a href="${contextPath}/patient/list?page=${guiPagination.firstPage}"><i class="icon-first-2"></i></a>
                    </li>
                    <li class="prev ${guiPagination.activePage == guiPagination.firstPage ? 'disabled' : ''}">
                        <a href="${contextPath}/patient/list?page=${guiPagination.prevPage}"><i class="icon-previous"></i></a>
                    </li>
                    <s:iterator status="stat" begin="1" end="%{guiPagination.noOfPages}">
                        <li class="${guiPagination.activePage == stat.count ? 'active' : ''}">
                            <a href="${contextPath}/patient/list?page=${stat.count}">${stat.count}</a>
                        </li>
                    </s:iterator>         
                    <li class="next ${guiPagination.activePage == guiPagination.lastPage ? 'disabled' : ''}">
                        <a href="${contextPath}/patient/list?page=${guiPagination.nextPage}"><i class="icon-next"></i></a>
                    </li>
                    <li class="last ${guiPagination.activePage == guiPagination.lastPage ? 'disabled' : ''}">
                        <a href="${contextPath}/patient/list?page=${guiPagination.lastPage}"><i class="icon-last-2"></i></a>
                    </li>
                </ul>
            </div>
            
        </div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>
                